
import React, { PureComponent } from 'react';
import { RecommendWrapper, RecommendItem, Eweima, EweimaInfo, EweimaImg } from '../styled';
import { connect } from 'react-redux';
 import { actionTypes } from '../store';

class Recommend extends PureComponent {
	render() {
		return(
			<RecommendWrapper onMouseEnter={this.props.hanleShow}>
				{this.props.RecommendUrl.map((item) => {
					return(
						<RecommendItem key={item.get('id')} imgUrl={item.get('imgUrl')}></RecommendItem>
					)
				})}
				<Eweima>
					<img src="//cdn2.jianshu.io/assets/web/download-index-side-qrcode-cb13fc9106a478795f8d10f9f632fccf.png" alt="" />
					<EweimaInfo>
						<h4>下载简书手机APP</h4>
						<p>随时随地发现和创作内容</p>
					</EweimaInfo>
					<EweimaImg className={ this.props.show ? 'ewmShow' : ''}></EweimaImg>
				</Eweima>
			</RecommendWrapper>
		)
	}
}

const mapState = (state) => ({
	RecommendUrl: state.getIn(['home', 'recommendList']),
	show: state.getIn(['home', 'show'])
});

const mapDispatch = (dispatch) => {
	return{
		hanleShow() {
			dispatch(actionTypes.ewmShow())
		}
	}
}

export default connect(mapState, mapDispatch)(Recommend);